<template>
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  <span>全名：{{ person.fullName }}</span>
  <br />
  <input type="text" v-model="person.fullName" />
</template>

<script>
// 体现出了组合式API的使用
import { reactive, computed } from "vue";
export default {
  name: "myDemo",
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    });

    // 简写形式，默认调用get-----只读
    // person.fullName = computed(() => {
    //   return person.firstName+'-'+person.lastName
    // })

    // 完整形式，可读可写
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        let arr = value.split("-");
        person.firstName = arr[0];
        person.lastName = arr[1];
      },
    });

    return {
      person,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
